<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex属性练习</title>
    <style>
        /* 
        display ：flex 默认为以下设置
            元素排列为一行 (flex-direction 属性的初始值是 row)。
            元素从主轴的起始线开始。
            元素不会在主维度方向拉伸，但是可以缩小。
            元素被拉伸来填充交叉轴大小。
            flex-basis 属性为 auto。
            flex-wrap 属性为 nowrap
        */
        /* 
            flex-direction   指定了内部元素是如何在 flex 容器中布局的，定义了主轴的方向(正方向或反方向)。
                row
                    flex容器的主轴被定义为与文本方向相同。 主轴起点和主轴终点与内容方向相同。
                row-reverse
                    表现和row相同，但是置换了主轴起点和主轴终点
                column
                    flex容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同
                column-reverse
                    表现和column相同，但是置换了主轴起点和主轴终点

            flex-wrap  指定 flex 元素单行显示还是多行显示 。如果允许换行，这个属性允许你控制行的堆叠方向。
                nowrap
                    flex 的元素被摆放到到一行，这可能导致溢出 flex 容器。 cross-start  会根据 flex-direction 的值 相当于 start 或 before。
                wrap
                    flex 元素 被打断到多个行中。cross-start 会根据 flex-direction 的值选择等于start 或before。cross-end 为确定的 cross-start 的另一端。
                wrap-reverse
                    和 wrap 的行为一样，但是 cross-start 和 cross-end 互换。
            flew-flow  是上两个的合并写法  row  wrap
        */





        span {
            border: 2px solid orange;
            width: 100px;
        }

        .container {
            width: 880px;
            height: 500px;
            border: 2px solid skyblue;
            display: flex;
            /* 是否换行 */
            flex-wrap: wrap;
            /* 主轴位置 */
            flex-direction: row;
            /* justify-content: space-around; */
            /* align-items: center; */
            /* justify-content: space-between; */
            /* flex-grow: 0; */
        }

        .first {
            flex-grow: 2;
        }

        .div {
            flex-grow: 2;
            border: 2px solid orange;
        }

        .second {
            flex-grow: 2;
            /* flex-basis: 200px; */
        }

        .third {
            flex-grow: 2;
            /* flex-grow: 1; */

        }

        .four {
            flex-grow: 2;
            /* flex-grow: 1; */
        }



        .content,
        .content1,
        .content2 {
            color: #fff;
            font: 100 24px/100px sans-serif;
            height: 150px;
            text-align: center;
        }

        .content div,
        .content1 div,
        .content2 div {
            height: 50%;
            width: 50%;
        }

        .red {
            background: orangered;
        }

        .green {
            background: yellowgreen;
        }

        .blue {
            background: steelblue;
        }

        /* Flexbox Styles */
        .content {
            display: flex;
            flex-wrap: wrap;
        }

        .content1 {
            display: flex;
            flex-wrap: nowrap;
        }

        .content2 {
            display: flex;
            flex-wrap: wrap-reverse;
        }
        .wrap{
            display: flex;
            flex-direction: column;

        }
        .wrap-1{
            flex-grow: 1;
        }
    </style>
</head>

<body>
    <h4>This is an example for flex-wrap:wrap </h4>
    <div class="content">
        <div class="red">1</div>
        <div class="green">2</div>
        <div class="blue">3</div>
    </div>
    <h4>This is an example for flex-wrap:nowrap </h4>
    <div class="content1">
        <div class="red">1</div>
        <div class="green">2</div>
        <div class="blue">3</div>
    </div>
    <h4>This is an example for flex-wrap:wrap-reverse </h4>
    <div class="content2">
        <div class="red">1</div>
        <div class="green">2</div>
        <div class="blue">3</div>
    </div>

    <div class="container">
        <span class="first">第一个行内元素</span>
        <div class="div">第二个块级元素</div>
        <span class="second">第三个</span>
        <span class="third">第四个</span>
        <span class="four">第五个</span>
    </div>

    <div class="wrap">
        <div class="wrap-1">123</div>
        <div class="wrap-2">456</div>
        <div class="wrap-3">789</div>
    </div>
</body>

</html>